<template>
  <!-- 积分调整 -->
  <div class="global-topList">
    <div class="top_wrap pt-16 pb-16 borderB-2">
      <span class="mr-8">VIP卡号</span>
      <el-select
        placeholder="请选择"
        clearable
        v-model="value"
        @change="onChange"
        @clear="getAdjustIntegralList"
      >
        <el-option
          v-for="item in vipCustomerList"
          :key="item.id"
          :label="item.name + ',' + item.phone"
          :value="item.name + ',' + item.phone"
        >
        </el-option>
      </el-select>
      <span class="mr-8 pl-26">积分调整数</span>
      <el-input
        class="update-input"
        type="number"
        v-model.number="params.adjustIntegralNumber"
      ></el-input>
      <span class="mr-8 pl-26">备注</span>
      <el-input
        class="update-input"
        v-model="params.remark"
        @input="inputRemark"
      ></el-input>
    </div>
    <div class="pt-16">
      <el-button type="primary" icon="el-icon-folder-checked" @click="onSave"
        >保存</el-button
      >
      <el-button icon="el-icon-search" @click="handleSearch">查询</el-button>
      <div class="table_wrap pt-16">
        <el-table
          :data="integralList"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
          highlight-current-row
          border
          height="68vh"
        >
          <el-table-column
            prop="creatTime"
            :formatter="dateFormat"
            label="日期"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="vipPhone" label="VIP卡号" width="180">
          </el-table-column>
          <el-table-column prop="vipName" label="姓名"> </el-table-column>
          <el-table-column prop="adjustIntegralNumber" label="积分调整数">
          </el-table-column>
          <el-table-column prop="remark" label="备注"> </el-table-column>
        </el-table>
        <!-- <ELTable :config="tableConfig" :tableData="integralList"></ELTable> -->
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAdjustIntegralList,
  AddAdjustIntegralInsertt
} from '@/request/store/K_AdjustIntegral'
import { get_vip_customer_data_api as getVipCustomerList } from '@/request/page_base_api/page_base_api'
// import ELTable from '@/components/common/ELTable'
export default {
  data() {
    return {
      vipCustomerList: [],
      integralList: [],
      params: {
        adjustIntegralNumber: null,
        directSaleNo: '',
        remark: '',
        // vipName: '',
        vipPhone: ''
      },
      value: '',
      total: 0,
      page: 1,
      searchData: {
        limit: 10,
        page: 1,
        vipPhone: ''
      }
    }
  },
  // components: { ELTable },
  created() {
    this.params.directSaleNo = localStorage.getItem('sdNo') || null
    this.getAdjustIntegralList()
    this.getVipCustomerList()
  },
  methods: {
    // 获取vip卡号
    async getVipCustomerList() {
      const { data } = await getVipCustomerList({
        directSaleNo: this.$store.state.currentStoreData.no
      })
      if (data && data.code === 200) {
        this.vipCustomerList = data.data
      }
    },
    // 积分调整查询
    async getAdjustIntegralList(params) {
      const { data } = await getAdjustIntegralList(params)
      if (data && data.code === 200) {
        this.total = data.total
        this.integralList = data.data
      }
    },
    // 保存
    async onSave() {
      const { data } = await AddAdjustIntegralInsertt(this.params)
      if (data && data.code === 200) {
        this.$message.success(data.msg)
        this.getAdjustIntegralList()
      }
    },
    // 查询
    handleSearch() {
      this.searchData.vipPhone = this.params.vipPhone
      this.getAdjustIntegralList(this.searchData)
    },
    handleSizeChange(value) {
      this.searchData.limit = value
      this.getAdjustIntegralList(this.searchData)
    },
    handleCurrentChange(value) {
      this.searchData.page = value
      this.getAdjustIntegralList(this.searchData)
    },
    inputRemark(val) {
      this.params.remark = val.toUpperCase()
    },
    onChange(e) {
      // console.log(e.split(','))
      this.params.vipName = e.split(',')[0]
      this.params.vipPhone = e.split(',')[1]
    },
    // 时间格式化
    dateFormat(row, column, cellValue, index) {
      let time
      if (row.creatTime) {
        time = row.creatTime.split('T')[0]
      }
      return time
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.top_wrap {
  .el-select {
    .el-input {
      .el-input__inner {
        height: 32px;
      }
      .el-select__caret {
        line-height: 27px;
      }
    }
  }
}
.pagination {
  margin-top: 10px;
  text-align: right;
  /deep/.el-input--suffix {
    .el-input__inner {
      width: 100px;
    }
  }
}
</style>
